<template>
	<!-- 我的消息 -->
	<view class="container" v-if="isloding">
		<view class="news">
			<view class="newsBox" v-for="(item,index) in info" :key="index" @tap="goMseege(item)">
				<uni-swipe-action>
					<uni-swipe-action-item :options="options" @click="onClick(item.id)" @change="change">
						<view class='cont'>
							<view class="item">
								<image src="../../static/icon/tongzhi.png" mode=""></image>
								<view class="content">
									<view class="title">
										系统消息
									</view>
									<view class="text">
										{{item.content}}
									</view>
								</view>
								<view class="nums" v-if="item.unread==0">
									
								</view>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>				
			</view>
		</view>
	</view>
</template>

<script>
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	export default {
		components: {
			uniSwipeAction,
			uniSwipeActionItem
		},
		data() {
			return {
				options: [ {
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				token:'',
				info:[],
				page:1,
				isloding:false
			};
		},
		onShow() {
			if(this.isloding){
				uni.showLoading({
					title: '加载中',
					mask: false
				});
				uni.request({
					url: this.webUrl+'/user/my/news',
					method: 'GET',
					header:{
						token:this.token
					},
					data: {
						page:1
					},
					success: res => {
						uni.hideLoading()
						if(res.data.code==0){
							this.info=res.data.data
						}else if(res.data.code==3){
							uni.showToast({
								title: res.data.msg,
								icon:'none',
								duration:2000
							});
						}else{
							uni.showToast({
								title: '网络错误',
								icon:'none',
								duration:2000
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络错误',
							icon:'none',
							duration:2000
						});
					},
					complete: () => {}
				});
			}else{
				
			}
		},
		onLoad(e) {
			// console.log(e)
			this.token=e.token
			uni.showLoading({
				title: '加载中',
				mask: false
			});
			uni.request({
				url: this.webUrl+'/user/my/news',
				method: 'GET',
				header:{
					token:e.token
				},
				data: {
					page:1
				},
				success: res => {
					// console.log(res)
					uni.hideLoading()
					this.isloding=true
					if(res.data.code==0){
						this.info=res.data.data
					}else if(res.data.code==3){
						uni.showToast({
							title: res.data.msg,
							icon:'none',
							duration:2000
						});
					}else{
						uni.showToast({
							title: '网络错误',
							icon:'none',
							duration:2000
						});
					}
				},
				fail: () => {
					uni.showToast({
						title: '网络错误',
						icon:'none',
						duration:2000
					});
				},
				complete: () => {}
			});
		},
		onReachBottom() {
			uni.showLoading({
				title: '加载中',
				mask: false
			});
			this.page++
			uni.request({
				url: this.webUrl+'/user/my/news',
				method: 'GET',
				header:{
					token:this.token
				},
				data: {
					page:this.page
				},
				success: res => {
					uni.hideLoading()
					if(res.data.code==0){
						if(res.data.data.length==0){
							uni.showToast({
								title: '没有更多了',
								icon:'none',
								duration:2000
							});
						}else{
							let arr=res.data.data.map(item=>{
								this.info.push(item)
							})
						}
					}else if(res.data.code==3){
						uni.showToast({
							title: res.data.msg,
							icon:'none',
							duration:2000
						});
					}else{
						uni.showToast({
							title: '网络错误',
							icon:'none',
							duration:2000
						});
					}
				},
				fail: () => {},
				complete: () => {}
			});
		},
		methods:{
			goMseege(item){
				uni.navigateTo({
					url: 'Messge/Messge?id='+item.id+'&token='+this.token,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
		    onClick(id){
				//删除
		      // console.log('当前点击的是第'+e.index+'个按钮，点击内容是'+e.content.text)
			  uni.showLoading({
			  	title: '加载中',
			  	mask: false
			  });
			  uni.request({
			  	url: this.webUrl+'/user/my/newsDelete/'+id,
			  	method: 'DELETE',
				header:{
					token:this.token
				},
			  	data: {},
			  	success: res => {
					// console.log(res)
					if(res.data.code==0){
						uni.showToast({
							title: '操作成功',
							icon:'none',
							duration:2000
						});
						uni.request({
							url: this.webUrl+'/user/my/news',
							method: 'GET',
							header:{
								token:this.token
							},
							data: {
								page:1
							},
							success: res => {
								// console.log(res)
								uni.hideLoading()
								if(res.data.code==0){
									this.info=res.data.data
								}else if(res.data.code==3){
									uni.showToast({
										title: res.data.msg,
										icon:'none',
										duration:2000
									});
								}else{
									uni.showToast({
										title: '网络错误',
										icon:'none',
										duration:2000
									});
								}
							},
							fail: () => {
								uni.showToast({
									title: '网络错误',
									icon:'none',
									duration:2000
								});
							},
							complete: () => {}
						});
					}else if(res.data.code==3){
						uni.showToast({
							title: res.data.msg,
							icon:'none',
							duration:2000
						});
					}else{
						uni.showToast({
							title: '网络错误',
							icon:'none',
							duration:2000
						});
					}
				},
			  	fail: () => {
					uni.showToast({
						title: '网络错误',
						icon:'none',
						duration:2000
					});
				},
			  	complete: () => {}
			  });
		    },
		    change(open){
		      console.log('当前开启状态：'+ open)
		    }
		  }
	}
</script>

<style lang="scss" scoped>
	.container {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: #f2f2f2;
		overflow: hidden;

		.news {
			margin-top: 30upx;
			background: #FFFFFF;
			.newsBox{
				border-bottom: 2upx solid #EDEDED;
			}
			.item {
				display: flex;
				margin: 0 30upx;

				image {
					width: 70upx;
					height: 70upx;
					margin-top: 24upx;
				}

				.content {
					margin: 28upx 0 0 22upx;
					padding-bottom: 28upx;

					.title {
						font-size: 26upx;
						font-family: Microsoft YaHei;
						font-weight: bold;
						color: rgba(52, 52, 52, 1);
						line-height: 26upx;
					}

					.text {
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
						width: 300upx;
						font-size: 24upx;
						line-height: 24upx;
						margin-top: 12upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(52, 52, 52, 1);
					}
				}

				.nums {
					width: 40upx;
					height: 40upx;
					background: red;
					color: #FFFFFF;
					border-radius: 50%;
					margin-top: 40upx;
					text-align: center;
					line-height: 40upx;
					font-size: 24upx;
					position: absolute;
					right: 50upx;
				}
			}
		}
	}
</style>
